<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小黑日记本</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--主体部分-->
<section id="todoapp">
    <!--输入框-->
    <header class="header">
        <h1>小黑记事本</h1>
        <input autofocus="autofocus" placeholder="请输入任务" class="new-todo" v-model="inputValue" autocomplete="off"
               @keyup.enter="add">
    </header>
    <!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" >
                <div class="view">
                    <span class="index">{{index+1}}</span>
                    <label>{{item}}</label>
                    <button class="destroy" @click="remove(index)"></button>
                </div>
            </li>

        </ul>
    </section>
    <!--统计与清空-->
    <footer class="footer" v-show="list.length!=0">
        <span class="todo-count"><strong>{{list.length}}</strong> items left</span>
        <button class="clear-completed" @click="clear">
            Clear
        </button>
    </footer>
</section>
<!--底部-->
<footer class="info">
    <p>
        <a href="/../Weather/index.html"><img
                src="https://pic2.zhimg.com/v2-87499324a2d7b58b81039a3aff146cbb_r.jpg?source=172ae18b"
                width="50%"></a>
    </p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#todoapp",
        data: {
            index: 0,
            list: ["写代码", "吃饭饭", "睡觉觉"],
            inputValue: ""
        },
        methods: {
            add: function () {
                if (isNaN(this.inputValue)) {
                    this.list.push(this.inputValue)
                }
            },
            remove: function (index) {
                if (this.list.length > 0) {
                    this.list.splice(index, 1)
                }
            },
            clear: function () {
                this.list=[]
            }
        }
    })
</script>
</body>
</html>